<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript">
        EvPNG.fix('div, ul, img, li, input, a');
    </script>
    <![endif]-->

    <title>sanshi</title>
</head>
<body>
<!--Begin Header Begin-->
<div class="soubg">
    <div class="sou">
        <span class="fr">
        	<span class="fl">你好，请<a href="Login.html">登录</a>&nbsp; <a href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp; </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle"/></a></span>
        </span>
    </div>
</div>
<!--End Header End-->
<!--Begin Login Begin-->
<div class="log_bg">
    <div class="top">
        <div class="logo"><a href="Index.html"><img src="images/logo.png"/></a></div>
    </div>
    <div class="regist">
        <div class="log_img"><img src="images/l_img.png" width="611" height="425"/></div>
        <div class="reg_c" id="myRegister">
            <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0" cellpadding="0">
                <tr height="50" valign="top">
                    <td width="95">&nbsp;</td>
                    <td>
                        <span class="fl" style="font-size:24px;">注册</span>
                        <span class="fr">已有商城账号，<a href="Login.html"
                                                         style="color:#ff4e00;">我要登录</a></span>
                    </td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;登录账号 &nbsp;</td>
                    <td><input type="text" value="" class="l_user" v-model="loginName"/></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;</td>
                    <td><input type="text" value="" class="l_user" v-model="userName"/></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                    <td><input type="password" value="" class="l_pwd" v-model="password"/></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                    <td><input type="password" value="" class="l_pwd" v-model="rpassword"/></td>
                </tr>

                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;</td>
                    <td><input type="text" value="" class="l_email" v-model="email"/></td>
                </tr>

                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;验证码 &nbsp;</td>
                    <td><input type="text" value="" class="l_email" v-model="proveCode" style="width: 100px"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button :disabled="isButtonDisabled" style="width: 100px;height: 36px" @click="sendCode()">发送验证码
                        </button>
                        <span v-if="isButtonDisabled">{{number}}s</span>
                    </td>
                </tr>

                <tr height="50">
                    <td align="right">电话号 &nbsp;</td>
                    <td><input type="text" value="" class="l_mem" v-model="mobile"/></td>
                </tr>
                <tr height="50">
                    <td align="right">身份证 &nbsp;</td>
                    <td><input type="text" value="" class="l_num" v-model="identityCode"/></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;性别 &nbsp;</td>
                    <td>
                        <select v-model="sex">
                            <option value="0">-请选择-</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td style="font-size:12px; padding-top:20px;">
                	<span style="font-family:'宋体';" class="fl">
                    	<label class="r_rad"><input type="checkbox" @click="select(event)"/></label><label
                            class="r_txt">我已阅读并接受《用户协议》</label>
                    </span>
                    </td>
                </tr>
                <tr height="60">
                    <td>&nbsp;</td>
                    <td><input type="submit" value="立即注册" class="log_btn" @click="doRegister()"/></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!--End Login End-->
<!--Begin Footer Begin-->
<div class="btmbg">
    <div class="btm">
        备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights Reserved.
        复制必究 , Technical Support: Dgg Group <br/>
        <img src="images/b_1.gif" width="98" height="33"/><img src="images/b_2.gif" width="98" height="33"/><img
            src="images/b_3.gif" width="98" height="33"/><img src="images/b_4.gif" width="98" height="33"/><img
            src="images/b_5.gif" width="98" height="33"/><img src="images/b_6.gif" width="98" height="33"/>
    </div>
</div>
<!--End Footer End -->
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">

    const myVue = new Vue({
        el: '#myRegister',
        data: {
            proveCode: '',
            loginName: '',
            userName: '',
            password: '',
            rpassword: '',
            sex: '',
            identityCode: '',
            email: '',
            mobile: '',
            number: 60,
            isButtonDisabled: false,
            checkBoxIsSelect:false
        },
        methods: {
            loginOut: function () {
                window.sessionStorage.clear();
                axios({
                    url:'/api/user/exit'
                }).then(rs=>{
                    if (rs.data.code===200){
                        alert("注销成功!")
                    }else {
                        alert("注销失败！")
                    }
                })
            },
            select:function (e){
                    this.checkBoxIsSelect=!this.checkBoxIsSelect;
            },

            sendCode: function () {
                const email = this.email;
                if (!(email.substring(email.length - 4, email.length) === ".com" && email.lastIndexOf("@") !== -1 && email.lastIndexOf("@") < email.lastIndexOf(".com"))) {
                    alert("邮箱格式错误！")
                    return;
                }
                axios({
                    url: '/api/email/proveEmail',
                    params: {
                        email: this.email
                    }
                }).then(function (rs) {

                    time = setInterval(function () {
                        myVue.number--
                    }, 1000);
                    myVue.isButtonDisabled = true
                })
            },

            doRegister: function () {
                if (!this.checkBoxIsSelect){
                    alert("请勾选用户协议")
                    return;
                }

                const loginName = this.loginName;
                const proveCode = this.proveCode;
                const userName = this.userName;
                const password = this.password;
                const rpassword = this.rpassword;
                const sex = this.sex;
                const identityCode = this.identityCode;
                const email = this.email;
                const mobile = this.mobile;
                if (loginName === '' || userName === '' || password === '' || sex === '0' || identityCode === '' || email === '' || mobile === '' || sex === '' || proveCode === '') {
                    alert("内容不能为空，请重新输入！");
                    return;
                }
                if (password !== rpassword) {
                    alert("两次输入的密码不相等，请重新输入！");
                    return;
                }
                if (loginName.length < 6) {
                    alert("账号不能小于六位！");
                    return;
                }
                if (password.length < 6) {
                    alert("密码不能小于六位！");
                    return;
                }
                if (!(email.substring(email.length - 4, email.length) === ".com" && email.lastIndexOf("@") !== -1 && email.lastIndexOf("@") < email.lastIndexOf(".com"))) {
                    alert("邮箱格式错误！")
                    return;
                }
                if (!/^1[3|4|5|7|8][0-9]{9}$/.test(mobile)) {
                    alert("手机号格式有误！");
                    return;
                }
                if (!/^(?:\d{15}|\d{17}([0-9]|X))$/.test(identityCode)) {
                    alert("身份证格式有误！");
                    return;
                }
                axios({
                    url: '/api/email/getProCode',
                    params: {
                        email
                    }
                }).then(function (rs) {
                    if (rs.data.proveCode !== myVue.proveCode) {
                        alert("验证码有误，请重新输入！");
                        return;
                    }
                    axios({
                        url: '/api/user/isFind',
                        params: {
                            loginName
                        }
                    }).then(function (rs) {
                        if (rs.data.user !== null) {
                            alert("登录账号已存在，请重新填写！")
                            return;
                        }
                        axios({
                            url: '/api/user/register',
                            method:'POST',
                            data: {
                                loginName, userName, password, sex, identityCode, email, mobile
                            }
                        }).then(function (rs) {
                            if (rs.data.status === true) {
                                alert("注册成功！");
                                window.location = 'Login.html';
                            } else {
                                alert("注册失败！")
                            }
                        })
                    })
                })
            }
        },
        watch: {
            number: {
                handler(newValue) {
                    if (newValue === 0) {
                        clearInterval(time)
                        myVue.number = 60
                        myVue.isButtonDisabled = false
                    }
                }
            }
        },
        created: function () {
            this.sex = '0';
        }
    })
</script>
</body>
</html>
